<template>
    <el-drawer :visible="drawerShow" direction='rtl' :before-close="handleClose" :show-close="false" size="40%">
      <el-row>
        <el-col :span="5">名称:</el-col>
        <el-col :span="16">{{skuInfo.skuName}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">描述:</el-col>
        <el-col :span="16">{{skuInfo.skuDesc}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格:</el-col>
        <el-col :span="16">{{skuInfo.price}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">平台属性:</el-col>
        <el-col :span="16">
          <el-tag type="success" v-for="item in skuInfo.skuAttrValueList" :key="item.id" style="margin-right:10px">{{item.attrId}}-{{item.valueId}}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">图片:</el-col>
        <el-col :span="16">
          <el-carousel height="650px">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" style="height:100%">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
</template>

<script>
export default {
  name: 'Drawer',
  model: {
    prop: 'drawerShow'
  },
  props: {
    drawerShow: {
      type: Boolean,
      default: false
    },
    skuInfo:{
      type:Object,
      default:()=>({})
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          this.$emit('input',false)
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-row .el-col-5{
    font-size: 18px;
    text-align: right;
  }
  .el-col{
    margin: 10px 10px;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>
